<template>
  <div class="zZXx" v-show="whoShow==2">

    <div
      class="rMoneyBox padding10"
      :style="`width:${suoJ?'200px':'50px'}; height:${suoJ?'auto':'50px'};`"
    >
      <div v-show="suoJ">
        <div class="f_16 f_bold c333">担保注册 - 自助选择</div>
        <div class="c999">
          <div>
            总共
            <span class="f_bold cBlue f_20">{{$app.zongXuJ($app.z_XHuan(cglist))}}</span>
            项
          </div>
          <div>
            总额：<span class="f_bold cBlue marginR5">¥</span>
            <span class="f_bold cBlue f_20">{{$app.zongJiaDb($app.z_XHuan(cglist))}}</span>
          </div>
        </div>
      </div>
      <Icon
        :type="`${suoJ?'ios-arrow-dropright':'ios-arrow-dropleft-circle'}`"
        size="28"
        class="pointer suoJ"
        :class="`${suoJ?' cCCC':' cBlue'}`"
        @click="suoJ=!suoJ"
      />
    </div>
    


    <div>
      <div class="zBox marginR20 marginB30">


        <div class="xBox paddingLi lineH2" id="xBoxSearch">
          <!-- 默认45类 -->
          <template v-for="(val,i) in cglist">
            <div class="f_16 textLink" @click="b1(val)">
              <Icon
                :type="$app.judgeData(val.check)?'ios-arrow-down':'ios-arrow-forward'"
                class="relative"
              />
              <span
                :class="($app.judgeData(val.check)?' f_bold':'') +' '+ ($app.judgeData(val.editList)?' cBlue':'') "
              >第{{val.fcgnum}}类 - {{val.fcgname}}</span>
            </div>
            <div v-show="$app.judgeData(val.check)">
              <template v-for="(jar,r) in val.items">
                <div class="paddingL20">
                  <div
                    class="textLink txtOneLine"
                    @click="b2(jar)"
                  >
                    <Icon
                      :type="icon_change(jar)"
                      class="relative "
                      :class="$app.judgeData(jar.disabled)?'marginR5 c999 f_bold':''"
                    />
                    <span
                      :class="($app.judgeData(jar.check)?' f_bold':'')+' '+(FenLei45TT.xonqT(val,jar)?' cBlue':'')  +' '+ ($app.judgeData(jar.disabled)?' cCCC':'')"
                    >{{jar.fcgnum}}-{{jar.fcgname}}</span>
                  </div>
                  <div v-show="$app.judgeData(jar.check)">
                    <template v-for="(kao,k) in jar.items">
                      <div class="paddingL20 textLink txtOneLine zN45">
                        <div
                          @click="b3(val,kao)"
                          :class="FenLei45TT.xonqXw(val,kao)?' delLine ':' '"
                        >{{kao.fcgnum}}{{$app.judgeData(kao.fcgnum)?'-':''}}{{kao.fcgname}}</div>
                      </div>
                    </template>
                  </div>
                  
                </div>
              </template>
            </div>
          </template>

        </div>
      </div>
      <div class="overflowH paddingLi">
        <!-- 循环多多 -->
        <template v-for="(val,i) in cglist">
          <template v-if="$app.judgeData(val.editList)">
            <div class="marginB15">
              <div class="f_18 marginB10">
                <span>
                  第
                  <span class="cBlue">{{val.fcgnum}}</span>
                  类 - {{val.fcgname}}
                </span>
                <div class="pullRight f_14">
                  已选
                  <span class="cBlue f_bold f_20">{{(val.editList).length}}</span>
                  项，合计
                  <span class="cBlue f_bold marginR20">
                    ¥
                    <span class="cBlue f_bold f_20">{{$app.addEachTmDo((val.editList).length)}}</span>
                  </span>
                  <Button
                    type="primary"
                    class="relative marginR10"
                    ghost
                    style="top:-3px;"
                    size="small"
                    shape="circle"
                    @click="xonQ(val)"
                  >
                    <Icon type="md-trash" size="16" class="marginR5 relative"  />删 除
                  </Button>
                </div>
              </div>
              <div style="background-color:#f7f8fb;" class="paddingLi lineH2 zSB45_box margin0">
                <Row :gutter="15">
                  <template v-for="(jar,r) in val.editList">
                    <Col span="6" >
                      <div
                        class="txtOneLine padding5-10 tD pointer tran3"
                        @click="xw_Tc(val, r)"
                      >{{jar.fcgnum}}{{$app.judgeData(jar.fcgnum)?'-':''}}{{jar.fcgname}}</div>
                    </Col>
                  </template>
                </Row>
              </div>
            </div>
          </template>
        </template>
        <template v-if="$app.judgeData($app.zongGo(cglist))">
          <div class="cCCC lineH2" style="border-top:1px solid #eee;">
            操作说明：点击单个子类可删除。
          </div>
        </template>
        <template v-else>
          <img :src="SrIg" style="margin-top:50px;" />
        </template>
      </div>
      <div class="clearBoth"></div>
      <div class="f_18">
        总共
        <span class="f_bold cBlue f_28">{{$app.zongXuJ($app.z_XHuan(cglist))}}</span>
        项，总额：
        <span class="f_bold cBlue">¥</span>
        <span class="f_bold cBlue f_28">{{$app.zongJiaDb($app.z_XHuan(cglist))}}</span>
      </div>
    </div>
    
  </div>
</template>

<style scoped>
.zZXx .zBox {
  float: left;
  width: 400px;
  height: 448px;
  border: 1px solid #eee;
  background-color: #f9f9f9;
}
.zZXx .xBox {
  height: 445px;
  overflow: auto;
}
.zZXx .moreJ{
  border-bottom: dashed 1px #ccc;
  padding-left: 10px;
  margin-bottom: 20px;
  color:#aaa;
  font-size: 12px;
}
</style>


<script>
import SrIg from "@$@/img/selfchoice-bg.jpg";
import FenLei45TT from "@$@/js/$common/fenLei45TT";
export default {
  name: "z2",
  components: {},
  data() {
    let {
      $route: {
        query: { order_id }
      }
    } = this;

    let data = {
      //信息编辑的时候传入 订单ID
      order_id,

      /**
       * cglist.items.参数如下
       *    good=> 搜索命中
       *    check=> 用这个参数，判断展开哪一个？手机+PC共同合适用
       * 			这个参牛逼了，一级，二级展开，都靠他判断
       *      用户主动点点+搜索，都是靠这个参数=》展开
       *    active => 已经选中 (新方法升级，这个参数，已经不用了)
       *    disabled => 禁止选（只用担保注册会用到）
       * 第三级的fcgparent 与 第二级的fcgid 相等，二级与一级同理
       * cglist 第一级，自己手动加多了一个 editList:[] 方便处理
       * 一级，二级，一定有fcgnum；第三级，不一定
       **/
      cglist: [], //45栏目
      FenLei45TT,//45类 点击函数
    };

    let tool = {
      SrIg,
      suoJ: true //右上角浮动框：true显示，false隐藏
    };
    return Object.assign(data, tool);
  },
  props: ["whoShow", "orderInfo"],
  created() {
    this.b0_Z();
  },
  
  watch: {
    orderInfo(newVal, oldVal) {
      if( $app.judgeData(newVal.cg_list) ){
        // 命中选中项
        this.b0(()=>{
          let{
            cglist
          }=this;

          // 初始化命中值=赋值
          cglist.forEach((val,i)=>{
            (newVal.cg_list).forEach((jar,r)=>{
              if(val.fcgid == jar.fcgid){
                this.$set(val, "editList", jar.items);
              }
            });
          });
          
        });
      }
    }
  },
  mounted() {},
  methods: {
    // 万物归零
    b0_Z(){
      this.cglist=[];//清空数据 45栏目
      this.b0();
    },
    
    // 永远的第一次
    b0(callBack){
      $ajax.mGlistAll({//一切从零开始
        fcgparent: 0
      },resData => {
        if($app.judgeData(this.cglist)){
          //已经有值，不重新操作，否则会清空掉，原来命中的值
        }else{
          this.$set(this, "cglist", resData);//赋值
        }

        
        callBack instanceof Function && callBack();
      });
    },
    
    //45类点击 第1层
    b1(val){
      if(val.check){//数据已经有了不做重新请求=》更加快
        this.$set(val, "check", false); //已经展开 点击缩起
      }else{
        if ($app.judgeData(val.items)) {
          this.$set(val, "check", true); //已经展开 点击缩起
        }else{
          // 调用父亲的方法 获取商标文字
          this.$emit('orWInput',text=>{
            $ajax.mGlistAll({
              fcgparent: val.fcgid,
              guarantee_tm_name:text
            }, resDaP => {
              this.$set(val, "items", resDaP);
              this.$set(val, "check", true);
            });
          });
        }
      }
    },
    //45类点击 第2层
    b2(jar) {
      if($app.judgeData(jar.disabled)){
        //担保注册不给你过
      }else{
        if(jar.check){//数据已经有了不做重新请求=》更加快
          this.$set(jar, "check", false); //已经展开 点击缩起
        }else{
          if ($app.judgeData(jar.items)) {
            this.$set(jar, "check", true); //已经展开 点击缩起
          }else{
            // 调用父亲的方法 获取商标文字
            this.$emit('orWInput',text=>{
              let obj = {
                fcgparent: jar.fcgid,
                guarantee_tm_name:text
              };
              $ajax.mGlistAll(obj, resDaP => {
                this.$set(jar, "items", resDaP);
                this.$set(jar, "check", true);
              });
            });
          }
        }
      }
    },
    //第三级，最后一级
    b3(val, kao){
      let {
        cglist
      }=this;
      
      if (FenLei45TT.xonqXw(val, kao)) {
        //不做任何处理 要删除，请去右边命中框做操作
      }else{

        // 获取命中
        let val_MingZ='';

        for(let g=0;g<cglist.length;g++){
          if(cglist[g].fcgid==val.fcgid){
            val_MingZ=cglist[g];
            break;
          }
        }


        let editListArray = [];
        if ($app.judgeData(val_MingZ.editList)) editListArray = val_MingZ.editList;
        editListArray.push(kao);
        this.$set(val_MingZ, "editList", editListArray);
        // console.log(this.cglist)
      }
    },
    //删除单个
    xw_Tc(val, r) {
      if ((val.editList).length == 1) {
        this.judLast(val, ()=>{
          $app.arrayRemove(val.editList, val.editList[r]);
        });
      } else {
        $app.arrayRemove(val.editList, val.editList[r]);
      }
    },
    //判断是否剩下最后一个，配合上者使用
    judLast(val, callBack) {
      $app.confirm(
        "第 " + val.fcgnum + " 类 - " + val.fcgname,
        "删除该分类", {
          yesFun:()=>{
            callBack();
            if ($app.judgeData(val.items)) {
              (val.items).forEach((Zat, z)=>{
                this.$set(Zat, "check", false);
              });
            }
            this.$set(val, "check", false);
          }
        }
      );
    },
    //删除总
    xonQ(val) {
      this.judLast(val,()=>{
        this.$set(val, "editList", undefined);
      });
    },









    // icon控制
    icon_change(jar){
      let out='';
      if($app.judgeData(jar.disabled)){
        out='md-close';
      }else if($app.judgeData(jar.check)){ 
        out='ios-arrow-down';
      }else{
        out='ios-arrow-forward';
      }
      return out;
    },

    




  }
};
</script>